<template>
  <!-- 营销项目计划管理提报 -->
  <div>
    <!-- 查询 -->
    <commonFilter @filterChange="changeHandle" @onCollapse="collapseHandle" />
    <!-- 列表 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
      columnsRef="projectOperating_plan_report_index_01"
    >
      <template slot="controls">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="drawerHandle(null,'add')"
        >新建</el-button>
      </template>
    </FilterTable>
    <!-- 弹窗 -->
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer"
      title="项目计划提报"
      destroyOnClose
      :containerStyle="{width:'70vw',minWidth:'1000px',height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <details-form :options="detailsConfig" @close="closeDrawer" />
    </Drawer>
    <!-- 明细弹窗 -->
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawerShow"
      title="项目计划提报明细"
      destroyOnClose
      :containerStyle="{width:'70vw',minWidth:'1000px',height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <show-form :options="detailsConfig" @close="closeDrawerShow" />
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';

import commonFilter from '../commonFilter';
import detailsForm from '../approvalDetails';
import showForm from '../approvalDetails/indexShow';
import { findPageDlr } from '@/api/cms-api/projectOperating/plan';
import * as types from '@/api/cms-api/projectOperating/plan/types';

export default {
  mixins: [dictionary],
  components: {
    commonFilter,
    detailsForm,
    showForm
  },
  data() {
    return {
      columns: this.creatColumns(),
      fetchApi: findPageDlr,
      fetchParams: { statusQuery: types.DEALER_PROJECT_STATUS_PLAN_NOT_SUBMIT + ',' + types.DEALER_PROJECT_STATUS_PLAN_EXAMINE_REJECT },
      visibleDrawer: false,
      visibleDrawerShow: false,
      detailsConfig: {}
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    //打开窗口
    drawerHandle(row, type) {
      let id = -1;
      if (type != 'add') {
        id = row.planId;
      }
      this.detailsConfig = {
        id: id, //表主键
        formType: type
      };
      this.visibleDrawer = true;
    },
    //关闭窗口
    closeDrawer(data) {
      this.visibleDrawer = false;
      if (data.type === 'refresh') {
        // 重新加载表格数据
        this.fetchParams = { ...this.fetchParams };
      }
    },
    //打开明细窗口
    drawerHandleShow(row, type) {
      let id = -1;
      if (type != 'add') {
        id = row.planId;
      }
      this.detailsConfig = {
        id: id, //表主键
        formType: type
      };
      this.visibleDrawerShow = true;
    },
    //关闭明细窗口
    closeDrawerShow(data) {
      this.visibleDrawerShow = false;
      if (data.type === 'refresh') {
        // 重新加载表格数据
        this.fetchParams = { ...this.fetchParams };
      }
    },
    //当搜索按钮按下后会触发
    changeHandle(val) {
      if (!val) {
        val = { planStartDate: [], activityMonth: [] };
      }
      this.fetchParams = Object.assign(
        {
          statusQuery: types.DEALER_PROJECT_STATUS_PLAN_NOT_SUBMIT + ',' + types.DEALER_PROJECT_STATUS_PLAN_EXAMINE_REJECT,
          planStartDateBegin: val.planStartDate[0] || undefined,
          planStartDateEnd: val.planStartDate[1] || undefined,
          activityMonthBegin: val.activityMonth[0] || undefined,
          activityMonthEnd: val.activityMonth[1] || undefined
        },
        val
      );
      console.log('this.fetchParams:', this.fetchParams);
    },
    //展开收起搜索框触发
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    //创建表格列配置
    creatColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            let editBtn, editBtnEnd;
            if (props.row.planStatus == types.DEALER_PROJECT_STATUS_PLAN_NOT_SUBMIT || props.row.planStatus == types.DEALER_PROJECT_STATUS_PLAN_EXAMINE_REJECT) {
              editBtn = (
                <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'edit')}>
                  修改
                </el-button>
              );
              editBtnEnd = <el-divider direction="vertical" />;
            } else {
              editBtn = (
                // <el-button size="mini" type="text" >
                //     修改
                // </el-button>
                <span>修改</span>
              );
              editBtnEnd = <el-divider direction="vertical" />;
            }
            return (
              <div>
                {editBtn}
                {editBtnEnd}
                <el-button size="mini" type="text" onClick={() => this.drawerHandleShow(props.row, 'show')}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        { title: '项目编号', dataIndex: 'planCode', sorter: true },
        {
          title: '项目状态',
          dataIndex: 'planStatus',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.planStatus, '2531')}</span>;
          }
        },
                // { title: '项目车型', dataIndex: 'modal', sorter: true},
        { title: '项目车型', dataIndex: 'modelLists', sorter: true },
        // { title: '项目大类', dataIndex: 'projectMainClass', sorter: true },
        { title: '项目大类', dataIndex: 'projectMainClassName', sorter: true },
        // { title: '项目小类', dataIndex: 'projectSmallClass', sorter: true },
        { title: '项目小类', dataIndex: 'projectSmallClassName', sorter: true },
        { title: '预算类别', dataIndex: 'budgetType',  sorter: true,
              render: props => {
              //编码转汉字
              return <span>{this.createDictText(props.row.budgetType, '8052')}</span>;
        } },  
        { title: '方案编号', dataIndex: 'programCode', sorter: true },
        { title: '方案名称', dataIndex: 'programName', sorter: true },
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '计划项目金额', dataIndex: 'planProjectAmount', sorter: true ,numberFormat:true,},
        { title: '计划批转金额', dataIndex: 'planApproveAmount', sorter: true ,numberFormat:true,},
        {
          title: '合作方式',
          dataIndex: 'cooperationMethod',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.cooperationMethod, '2532')}</span>;
          }
        },
        { title: '计划支持场次/投放天数', dataIndex: 'planTimeDay', sorter: true },
        { title: '目标订单数', dataIndex: 'targetOrderNum', sorter: true },
        { title: '目标集客数', dataIndex: 'targetGuestsNum', sorter: true },
        { title: '目标留档数', dataIndex: 'targetRetentionNum', sorter: true },
        { title: '项目月份', dataIndex: 'activityMonth', sorter: true, dateFormat: 'YYYY年MM月' },

        { title: '开始日期', dataIndex: 'planStartDate', sorter: true, dateFormat: 'YYYY年MM月DD日' },
        { title: '结束日期', dataIndex: 'planEndDate', sorter: true, dateFormat: 'YYYY年MM月DD日' },
        { title: '创建时间', dataIndex: 'createdAt', sorter: true, dateFormat: 'YYYY年MM月DD日 HH:mm:ss' }
      ];
    }
  }
};
</script>

<style scoped>
</style>
